Getting Data for the Current Row in a ViewBox
Description
When the ViewBox is clicked, you may want to get the value for the element or row that was clicked. This can be done by adding the row number to the ViewBox's template and creating an Item to add the click event to the layout.
Events can be added to a ViewBox using a5-items, which are defined on the Items tab in the ViewBox Builder. Items can be used to define behaviors that are triggered when an element is clicked or swiped. When combined with the row number for a record, actions can be added when individual records in a ViewBox are clicked.
Each record for the ViewBox is defined as an entry a zero-based JavaScript array. The index or "row number" for each record in the array can be added using the {[count]} Client-side Template directive. For example, in the ViewBox template layout below, an a5-item is added that performs an action when clicked. The row number (defined a {[count]}) for each record is also added via the a5-value attribute - a special attribute that is used to define a value for an element.
<div class="[theme:listBox.base.item.className]" a5-item="_AARow" a5-value="{[count]}">
<div style="display: table; width: 100%;">
<div style="display: table-cell;">
<div class="[theme:listBox.base.item.contextClassName]" style="float:right;">{State}</div>
<div class="[theme:listBox.base.item.parts.mainClassName]">{Lastname}</div>
<div class="[theme:listBox.base.item.parts.subClassName]">{Firstname}</div>
<div class="[theme:listBox.base.item.parts.contentClassName]">
{City}<br/>
</div>
</div>
</div>
<div style="display:table-cell; width: 40px; text-align: right; vertical-align: middle;">
<img src="{images.dialog.listNav}" />
</div>
</div>When an element with the _AARow item is clicked, the Javascript defined in the _AARow's click event is executed. The value of the a5-value attribute will be set in the v variable in the _AARow item's Javascript event. In the template, the value for a5-value is set to {[count]}, which corresponds to the row number of the record that was clicked in the ViewBox. This means the variable v will contain the row number for the selected row.
The click event's JavaScript is shown below. It gets the data for the selected row using the row number and displays the data in a JavaScript alert:
// get the row number. The row number is set because the template has the a5-value={[count]}"
//{[count]} returns the zero-based index into the ViewBox data array
var _row = v;
// get the data in the ViewBox
var data = this.data;
// get the data for the current row
var dataRow = data[_row];
// display the data in an alert
var msg = JSON.stringify(dataRow,'','\t');
alert ('You clicked on (zero-based) row number: ' + _row + '\nData for this row: ' + msg);Using this approach, you can get the data for the selected row in a ViewBox when it is clicked. For more information, watch the video below:
Get Data for Current Row in ViewBox
A common use case for a ViewBox is a light weight alternative to the List control. In a List control it is easy to get the data for the row that the user clicked on.
In this video we show how a ViewBox that is configured to display a list of data can be configured so that the data for the row that was clicked on can be obtained.